<template>
	<view class="content">
		<!-- 头部 -->
		<navBar />
		<!-- 公司动态 -->
		<text class="titles">检测动态</text>
		
		<view class="dtc">
			<view class="dtc-item" v-for="(item,index) in noticeList.slice(0, 3)" :key="index">
				<text>{{ item.title }}</text>
				<view class="dtc-c">{{ item.content }}</view>
				<text class="dtc-t">{{ $getRelativeTime(item.createTime) }}</text>
			</view>
		</view>
		
		<!-- 服务流程 -->
		<text class="titles">服务流程</text>
		
		<view class="fuwu">
			<view class="fw-item" v-for="(item,index) in menuListt" :key="index" @click="goNavigateTo(item.pages)">
				<text class="t-icon text-icon" :class="item.icon"></text>
				<view class="text">{{item.title}}</view>
			</view>
		</view>
		
		<tabBar selectedIndex="0" selectedTab="1" />
		
	</view>
</template>

<script>
	// 引入api
	import { 
		getProgramNoticeInfo, // 公告查询
	} from "@/proxy/program/program.api.js";
	export default {
		data() {
			return {
				noticeList:[], // 公告列表
				menuListt:[
					{
						icon: "t-icon-yuyue",
						title: "在线预约",
						pages: "/pagesClient/online/booking"
					},
					{
						icon: "t-icon-i-yunshuwancheng",
						title: "样品寄送",
						pages: "/pagesClient/sample/send"
					},
					{
						icon: "t-icon-fenxijiance",
						title: "检测分析",
						pages: "/pagesClient/detection/analyze?title=委托单&method=weituo"
					},
					{
						icon: "t-icon-baogao",
						title: "报告出具",
						pages: "/pagesClient/report/issue"
					},
				]
			}
		},
		onLoad() {
			this.getProgramNoticeInfoData();
		},
		methods: {
			// 获取公告列表
			async getProgramNoticeInfoData(){
				// 发送请求
				try {
				  const result = await getProgramNoticeInfo([{
					  customerCode:"",
					  businessType:"",
					  userID:"",
				  }]);
				  if (result.code == 200) {
				    // console.log("查询公告成功！！！",result);
					this.noticeList = result.data;
				  } else {
				    this.$toast({
				      title: result.data.msg,
				    });
				    return false;
				  }
				} catch (error) {
				  console.error("请求失败", error);
				  this.$toast({
				    title: "请求失败",
				    icon: "error",
				  });
				  return false;
				}
			},
			onSearchInput(e){
				// console.log("监听搜索input",e)
			},
			onSearchConfirm(e){
				// console.log("监听回车搜索input",e)
			},
			onChangePrint(){
				// console.log("点击搜索input",this.searchValue)
			},
			goNavigateTo(pages){
				this.$goto(pages)
			}
		}
	}
</script>

<style lang="scss">
	// page{
	// 	background-color: rgb(249,250,251);
	// 	height: 100vh;
	// }
	/* app端 */
	/* #ifdef APP-PLUS || H5 */
	#app,
	/* #endif */
	page {
	  background-color: #F9FAFB;
	  height: 100%;
	}
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		
		.titles{
			margin: 20rpx 0rpx 20rpx 20rpx;
			font-size: 35rpx;
		}
		
		.dtc{
			margin: 0rpx 20rpx;
			.dtc-item{
				background-color: #fff;
				padding: 20rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.1);
				.dtc-c{
					font-size: 24rpx;
					color: #6C7381;
					margin: 15rpx 0;
				}
				.dtc-t{
					font-size: 22rpx;
					color: #6C7381;
				}
			}
		}
		
		.fuwu{
			margin: 0rpx 20rpx;
			display: flex;
			.fw-item{
				flex: 1;
				background-color: #fff;
				border-radius: 20rpx;
				margin: 0 10rpx;
				text-align: center;
				font-size: 25rpx;
				padding: 20rpx 0;
				.text-icon{
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	}
</style>
